<template>
  <div class="DesignPanel">
    <div class="phone-box">
      <div class="phone-wrapper">
        <div class="phone-header">
          <div class="title">首页</div>
        </div>

        <div
          class="phone-body oio-scrollbar"
          :style="getWrapperStyle(curPage?.styles)"
        >
          <draggable
            class="component-list-wrapper"
            :list="widgetList"
            itemKey="id"
            :group="{ name: 'list', pull: false, put: true }"
            :sort="true"
            ghost-class="ghost"
            :force-fallback="true"
            :fallback-class="true"
            :fallback-on-body="true"
            @click="curWidget = curPage"
          >
            <template #item="{ element }">
              <div
                :class="[
                  'component-item',
                  { active: curWidget?.id === element.id }
                ]"
                @click.stop="curWidget = element"
              >
                <component
                  :is="element.componentName"
                  :componentData="element"
                  :style="getWrapperStyle(element.styles)"
                />

                <div class="tip-wrapper">
                  <div class="component-name">{{ element.name }}</div>
                  <div class="divider"></div>
                  <delete-filled
                    class="delete-icon"
                    style="font-size: 12px; color: #f56c6c"
                    @click="deleteWidget(element)"
                  />
                </div>
              </div>
            </template>
          </draggable>
        </div>

        <div class="phone-footer" @click="curWidget = navigation">
          <div
            class="tabs"
            v-if="
              navigation &&
              navigation.attributes &&
              navigation.attributes.list &&
              navigation.attributes.list.length
            "
          >
            <div
              class="tab-item"
              v-for="(item, index) in navigation.attributes.list"
              :key="index"
              :style="{ width: `${100 / navigation.attributes.list.length}%` }"
            >
              <div class="icon-wrapper">
                <i class="iconfont" :class="item.icon"></i>
              </div>
              <div class="text">{{ item.text }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="version">v1.0.0</div>

      <a-tooltip>
        <template #title>页面配置</template>
        <div class="page-config" @click="curWidget = curPage">
          <setting-outlined class="icon" />
        </div>
      </a-tooltip>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, Ref, ref } from 'vue'
import draggable from 'vuedraggable'
import { SettingOutlined, DeleteFilled } from '@ant-design/icons-vue'
import { getWrapperStyle } from '@/utils'

export default defineComponent({
  name: 'DesignPanel',
  components: { draggable, SettingOutlined, DeleteFilled },
  setup() {
    let curWidget: Record<string, any> = inject('curWidget', {})
    let curPage: Record<string, any> = inject('curPage', {})
    let widgetList = inject<Ref<[]>>('widgetList', ref([]))
    let navigation: Record<string, any> = inject('navigation', {})

    const deleteWidget = (widget: Record<string, any>) => {
      const index = widgetList.value.findIndex(
        (i: Record<string, any>) => i.id === widget.id
      )
      widgetList.value.splice(index, 1)
    }

    return {
      getWrapperStyle,
      curWidget,
      curPage,
      widgetList,
      navigation,
      deleteWidget
    }
  }
})
</script>

<style lang="scss" scoped>
.DesignPanel {
  height: 100%;
  position: relative;
  .phone-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 399px;
    height: 759px;
    border-radius: 50px;
    box-shadow: 0 8px 12px #ebedf0;
    background-image: url('@/assets/image/phone-box.png');
    background-size: 100% 100%;
    padding-top: 46px;
    .phone-wrapper {
      width: 375px;
      height: 667px;
      margin: 0 auto;
      overflow: hidden;
      background: #f7f8fa;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      .phone-header {
        height: 46px;
        background-color: #fff;
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        cursor: default;
        .title {
          flex: 1;
          font-size: 16px;
          font-weight: bold;
          color: #222;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .phone-body {
        flex: 1;
        height: 100%;
        overflow-y: auto;
        .component-list-wrapper {
          min-height: 100%;
          .component-item {
            cursor: default;
            border: 1px solid transparent;
            position: relative;
            &:hover {
              border: 1px dashed #035dff;
            }
            &.active {
              border: 1px solid #035dff;
            }
            .tip-wrapper {
              position: absolute;
              top: 0;
              right: 0;
              transform: translate(1px, -1px);
              height: 20px;
              background-color: #fff;
              box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
              border-radius: 4px;
              display: flex;
              justify-content: center;
              align-items: stretch;
              padding: 0 3px;
              .component-name {
                font-size: 12px;
                color: #333;
                font-weight: bold;
                white-space: nowrap;
                padding: 0 3px;
              }
              .divider {
                border-left: 1px solid rgba(0, 0, 0, 0.06);
                height: 0.9em;
                position: relative;
                top: 50%;
                transform: translateY(-50%);
              }
              .delete-icon {
                display: flex;
                align-items: center;
                padding: 0 3px;
                &:hover {
                  cursor: pointer;
                  background-color: #d9d9d9;
                  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
                  border-radius: 4px;
                }
              }
            }
          }
        }
      }
      .phone-footer {
        height: 48px;
        background-color: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        cursor: default;
        .tabs {
          display: flex;
          align-items: stretch;
          .tab-item {
            flex: 1;
            width: 20%;
            text-align: center;
            font-size: 0;
            line-height: 1;
            padding: 6px 0 4px;
            .icon-wrapper {
              .iconfont {
                font-size: 18px;
              }
            }
            .text {
              font-size: 12px;
              line-height: 14px;
              color: #888;
              margin-top: 5px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .version {
      font-size: 16px;
      font-weight: bold;
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
    }
    .page-config {
      position: absolute;
      top: 50px;
      left: -40px;
      transform: translateX(-50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 8px 12px #ebedf0;
      .icon {
        font-size: 22px;
        color: #b0afb2;
      }
    }
  }
}
</style>
